<template>
  <a-card>
    <a-spin :spinning="spinning">
      <a-descriptions :column="1">
        <a-descriptions-item label="所属权益包">{{ memberCardName(dataObj.memberCardId) }}</a-descriptions-item>
        <a-descriptions-item label="权益名称">{{ dataObj.name }}</a-descriptions-item>
        <a-descriptions-item label="会员卡类型">{{ rightsName(dataObj.rightsType) }}</a-descriptions-item>
        <a-descriptions-item :label="rightsName(dataObj.rightsType)">{{}}</a-descriptions-item>
        <!-- <a-descriptions-item label="搭盒次数" v-if="dataObj.rightsType === 1">{{ dataObj.value }}</a-descriptions-item>
        <a-descriptions-item label="每月要盒数" v-if="dataObj.rightsType === 2">{{ dataObj.value }}</a-descriptions-item> -->
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions :column="1">
        <a-descriptions-item label="展示名称">{{ dataObj.outName }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ dataObj.label }}</a-descriptions-item>
        <a-descriptions-item label="顺序权重">{{ dataObj.sorted }}</a-descriptions-item>
        <a-descriptions-item label="行动点">{{ dataObj.actionName }}</a-descriptions-item>
        <a-descriptions-item label="行动点链接">{{ dataObj.actionUrl }}</a-descriptions-item>
        <a-descriptions-item label="介绍"
          ><div class="goods-content">{{ dataObj.content }}</div></a-descriptions-item
        >
        <a-descriptions-item label="图标">
          <div class="img-box">
            <img :src="dataObj.icon" alt="" class="icon-img" />
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="图片介绍" v-if="dataObj.multiPicArr">
          <div class="multi-img">
            <div class="img-box" v-for="(item, index) in dataObj.multiPicArr" :key="index">
              <img :src="item" alt="" class="icon-img" />
            </div>
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-card>
</template>
<style scoped>
.goods-content {
  word-wrap: break-word;
}
.img-box {
  width: 104px;
  height: 104px;
  box-sizing: border-box;
  padding: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.multi-img {
  display: flex;
}
.icon-img {
  width: 86px;
  height: 86px;
  object-fit: scale-down;
}
</style>
<script>
import { rightsDetail, rightConfigList } from '@/api/box/marketing'
import { cardList, goodsCardList } from '@/api/box/product'
export default {
  data() {
    return {
      spinning: true,
      dataObj: {},
      goodsList: [],
      rightsTypeList: [],
      goodsPackage: []
    }
  },
  filters: {
    rightsType(value) {
      if (value === 1) {
        return '搭配师搭盒'
      } else if (value === 2) {
        return '预售盒子'
      } else if (value === 3) {
        return '展示权益'
      }
    }
  },
  computed: {
    memberCardName(val) {
      return val => {
        const result = this.goodsPackage.filter(e => e.id == val)
        if (result.length > 0) {
          return result[0].name
        } else {
          return val
        }
      }
    },
    rightsName(val) {
      return val => {
        const result = this.rightsTypeList.filter(e => e.id == val)
        if (result.length > 0) {
          return result[0].groupName
        } else {
          return val
        }
      }
    }
  },
  mounted() {
    // this.fetchGoodsList()
    this.getRightConfigList()
    this.getGoodsCardList()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchGoodsList() {
      cardList()
        .then(res => {
          if (res.code === 0) {
            for (var i = 0; i < res.data.length; i++) {
              this.goodsList.push({
                id: res.data[i].id,
                name: res.data[i].name
              })
            }
            this.fetchData()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('fetchGoodsList:' + err)
        })
    },
    getRightConfigList() {
      rightConfigList().then(res => {
        console.log(res)
        if (res.code == 0) {
          let result = res.data
          this.rightsTypeList = result.map(e => {
            return { groupName: e.groupName, id: e.id, rightType: e.rightType }
          })
          console.log(this.rightsTypeList)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getGoodsCardList() {
      let params = {
        page: {
          pageNo: 1,
          pageSize: 100
        }
      }
      goodsCardList(params).then(res => {
        if (res.code == 0) {
          this.goodsPackage = res.data
          console.log(this.goodsPackage)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    fetchData() {
      const id = this.$route.params.id
      const data = {
        requestData: {
          id: id
        }
      }
      rightsDetail(data)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.dataObj = res.data
            const multiPic = res.data.detailImgs
            if (multiPic !== undefined && multiPic !== null && multiPic !== '') {
              const multiPicArr = multiPic.split(',')
              this.dataObj.multiPicArr = multiPicArr
            }
            for (var j = 0; j < this.goodsList.length; j++) {
              if (this.dataObj.memberCardId === this.goodsList[j].id) {
                this.dataObj.memberCardName = this.goodsList[j].name
              }
            }
            if (this.dataObj.rightsType === 1 || this.dataObj.rightsType === 2) {
              this.dataObj.value = JSON.parse(res.data.useRule)[0].value
            }
            this.spinning = false
          } else {
            this.spinning = false
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          console.log('rightsDetail:' + err)
        })
    }
  }
}
</script>
